// 将此文件内容复制到App.js，运行npm start即可查看效果。
import React, { useState, useEffect } from 'react';
import ReactFlow, {
  useNodesState,
  useEdgesState,
  useReactFlow,
  ReactFlowProvider
} from 'reactflow';
import 'reactflow/dist/style.css';

// 导入节点组件（确保文件路径正确）
import OutputNode from './nodes/OutputNode';
import InputOutputNode from './nodes/InputOutputNode';
import InputNode from './nodes/InputNode';

const nodeTypes = {
  outputNode: OutputNode,
  ioNode: InputOutputNode,
  inputNode: InputNode,
};

const initialNodes = [
  {
    id: '1',
    type: 'outputNode',
    position: { x: 0, y: 0 },
    data: { label: '输出节点', color: '#ffcccb' }
  },
  {
    id: '2',
    type: 'ioNode',
    position: { x: 200, y: 0 },
    data: { label: '中间节点', color: '#90EE90' }
  },
  {
    id: '3',
    type: 'inputNode',
    position: { x: 400, y: 0 },
    data: { label: '输入节点', color: '#87CEEB' }
  }
];

const initialEdges = [
  { 
    id: 'e1-2', 
    source: '1', 
    target: '2', 
    sourceHandle: 'right', 
    targetHandle: 'left' 
  },
  { 
    id: 'e2-3', 
    source: '2', 
    target: '3', 
    sourceHandle: 'right', 
    targetHandle: 'top' 
  }
];

function App() {
  const { screenToFlowPosition } = useReactFlow();
  const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
  const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
  const [menu, setMenu] = useState({ 
    show: false, 
    x: 0, 
    y: 0 
  });

  const onConnect = (params) => {
    setEdges((eds) => eds.concat({
      ...params,
      id: `edge-${params.source}-${params.target}-${Date.now()}`,
      animated: true,
      style: { stroke: '#999' },
    }));
  };

  const onPaneContextMenu = (event) => {
    event.preventDefault();
    setMenu({
      show: true,
      x: event.clientX,
      y: event.clientY
    });
  };

  const addNode = (type) => {
    const flowPosition = screenToFlowPosition({ 
      x: menu.x, 
      y: menu.y 
    });
    
    const nodeConfig = {
      outputNode: { label: '输出节点', color: '#ffcccb' },
      ioNode: { label: '中间节点', color: '#90EE90' },
      inputNode: { label: '输入节点', color: '#87CEEB' }
    };

    setNodes((nds) => nds.concat({
      id: `node-${Date.now()}`,
      type,
      position: flowPosition,
      data: nodeConfig[type]
    }));
    
    setMenu({ ...menu, show: false });
  };

  useEffect(() => {
    const closeMenu = () => menu.show && setMenu({ ...menu, show: false });
    document.addEventListener('click', closeMenu);
    return () => document.removeEventListener('click', closeMenu);
  }, [menu]);

  return (
    <div style={{ height: '100vh', position: 'relative' }}>
      <ReactFlow
        nodes={nodes}
        edges={edges}
        nodeTypes={nodeTypes}
        onNodesChange={onNodesChange}
        onEdgesChange={onEdgesChange}
        onConnect={onConnect}
        onPaneContextMenu={onPaneContextMenu}
        fitView
      >
        {menu.show && (
          <div
            style={{
              position: 'fixed',
              left: menu.x + 10,
              top: menu.y + 5,
              background: '#fff',
              borderRadius: 6,
              boxShadow: '0 3px 10px rgba(0,0,0,0.15)',
              zIndex: 1000,
              minWidth: 160
            }}
          >
            <button
              onClick={() => addNode('outputNode')}
              style={menuButtonStyle}
            >
              添加输出节点
            </button>
            <button
              onClick={() => addNode('ioNode')}
              style={menuButtonStyle}
            >
              添加中间节点
            </button>
            <button
              onClick={() => addNode('inputNode')}
              style={menuButtonStyle}
            >
              添加输入节点
            </button>
          </div>
        )}
      </ReactFlow>
    </div>
  );
}

// 菜单按钮样式对象
const menuButtonStyle = {
  width: '100%',
  padding: '8px 16px',
  border: 'none',
  background: 'transparent',
  cursor: 'pointer',
  textAlign: 'left',
  transition: 'background 0.2s',
  fontSize: 14,
  ':hover': {
    background: '#f8f8f8'
  }
};

export default function FlowWrapper() {
  return (
    <ReactFlowProvider>
      <App />
    </ReactFlowProvider>
  );
}